<template>
	<view>
		<form catchsubmit="formSubmit">
			<view style="padding: 15rpx;">订单号:{{orderId}}</view>
			<view>
				<view class="remarksWrapper">
					<view style="padding-bottom: 20rpx;">申述内容：(150字以内,不小于10个字)</view>
					<view class="textareaBox">
						<textarea maxlength="150" name="remarks" placeholder="请输入反馈描述以便我们提供更好的帮助"
							v-model="desc"></textarea>
					</view>
				</view>
				<view style="display: flex;padding: 15rpx;border-bottom: 1px solid #F5F5F5;">
					<view>联系方式：</view>
					<view><input class="contact_input" v-model="contact" placeholder="邮箱/手机号" close /></view>
				</view>
				<view style="padding: 15rpx;">
					<view style="margin: 20rpx 0;">
						截图({{image_url.length}}/1)：
					</view>
					<view class="imgBox">
						<view class="addImgWrapper">
							<image mode="widthFix" src="https://webrtc.mszn1.com/DemoVideo/indexImg/index/addImg.png"
								@tap="uploadImage()"></image>
						</view>
						<view class="upImgBox" v-for="(item,index) in image_url" :key="index">
							<image class="upImg" :src="item" @tap="previewImg(index)">
								<image class="upImgBoxClose"
									src="https://webrtc.mszn1.com/DemoVideo/indexImg/index/close.svg"
									@tap="removeChooseImage(index)" mode="widthFix"></image>
							</image>
						</view>
					</view>
				</view>
				<view class="buttonWrapper">
					<button class="subBtn" @tap="submitForm()">
						提交
					</button>
				</view>
			</view>
		</form>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: "",
				desc: "",
				contact: "",
				image_url: [],
				reqImgStr: "", //当前图片url
			}
		},
		onLoad(opt) {
			console.log(opt)
			if (opt.orderId) {
				this.orderId = opt.orderId
			}
			//this.orderId = "W202310081000081696729077"
		},
		
		methods: {
			submitForm() {
				var that = this;
				//非空格式校验
				let error = "";
				if (that.desc.length < 10) {
					error = "反馈内容过短"
				}
				let phoneReg = /0?(13|14|15|17|18|19)[0-9]{9}/
				let mailReg = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;

				//联系方式正则
				if (phoneReg.test(that.contact) == false && mailReg.test(that.contact) == false) {
					console.log("phoneReg:" + phoneReg.test(that.desc))
					console.log("mailReg:" + mailReg.test(that.desc))
					error = "联系方式格式错误"
				}

				if (error) {
					uni.showToast({
						title: error,
						icon: 'none',
					})
					return;
				}

				this.submitFeedback()
			},
			submitFeedback() {
				console.log("可以提交表单")
				if (this.image_url.length <= 0) {
					console.log("文本申述")
					this.textFeedBack()
				} else {
					console.log("带图片申述")
					this.imageFeedBack()
				}
			},
			async textFeedBack() {
				var that = this
				const data = await this.$http('/appapi/message/complaint', {
					token: uni.getStorageSync("token"),
					orderno: that.orderId,
					message: that.desc,
					contact: that.contact,
				})
				console.log(data)
				uni.showToast({
					title: data.msg,
					icon: "none",
					success() {
						that.image_url = []
						that.desc = ""
						that.contact = ""
					}
				})
			},
			imageFeedBack() {
				var that = this
				uni.compressImage({
					src: that.image_url[0],
					quality: 50,
					success: res2 => {
						console.log(res2.tempFilePath)
						uni.uploadFile({
							url: 'https://qw.lvd8.cn/appapi/message/complaint', //自己的Java后台接口地址
							filePath: res2.tempFilePath,
							name: 'image',
							header: {
								'content-type': 'multipart/form-data',
							},
							formData: {
								token: uni.getStorageSync("token"),
								orderno: that.orderId,
								message: that.desc,
								contact: that.contact,
							},
							success: function(res) {
								let msg = JSON.parse(res.data)
								uni.showToast({
									title: msg.msg,
									icon: 'none',
									duration: 1200,
									success() {
										//清空处理
										that.image_url = []
										that.desc = ""
										that.contact = ""
									}
								});
							},
							fail(err) {
								uni.showToast({
									title: '数据异常',
									icon: 'success',
									duration: 2000,
								});
							}
						})
					}
				})
			},
			// 上传图片
			uploadImage() {
				var that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
						that.image_url = res.tempFilePaths
						that.reqImgStr = res.tempFilePath[0]
						uni.showModal({
							title: '提示',
							content: JSON.stringify(res.tempFilePaths),
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					},
					fail: (err) => {
						// 处理选取图片失败的情况
						console.error('选择图片失败：', err);
					},
				});
			},
			previewImg(index) {
				var that = this
				uni.previewImage({
					current: that.image_url[index],
					//当前显示图片的 http 链接
					urls: that.image_url // 需要预览的图片 http 链接列表

				})
			},
			removeChooseImage(index) {
				console.log("下标" + index)
				console.log("图片组：" + this.image_url)
				this.image_url.splice(index, 1)
			}
		}
	}
</script>

<style scoped>
	.subBtn {
		margin: 15px auto;
		background-color: #FA97B4;
		color: #fff;
		width: 90%;
	}

	.content {
		width: 95%;
		margin: auto;
		padding: 20rpx;
	}

	.section_item {
		/* 	border-bottom: 1rpx solid #d9d7e8; */
		padding: 15rpx;
		color: #000000;
	}

	.section-title {
		flex: 1;
	}

	.section-value {
		color: #808080;
		flex: 3;
	}

	.showTipWrapper {
		display: flex;
		justify-content: space-between;
	}

	.radioGroupBox {
		background-color: #64AFED;
		margin: 10rpx;
		border-radius: 30rpx;
		color: #ffffff;
		overflow: hidden;
		padding: 10rpx;
		transition: 2s linear height;
	}

	.hideradioGroupBox {
		height: 0;
		padding: 0;
	}

	.radioBox {
		display: flex;
	}

	.radioBox {
		margin: 10rpx;
	}

	.remarksWrapper {
		padding: 15rpx;
		margin: 40rpx 0
	}

	.textareaBox {
		width: 98%;
		height: 250rpx;
		border-radius: 30rpx;
		border: 1rpx solid #d9d7e8;
	}

	.textareaBox textarea {
		width: 90%;
		height: 250rpx;
		padding: 20rpx;
		box-sizing: border-box;
		margin: auto;
	}

	.iconAnimation {
		transition: 0.2s linear transform;
	}

	.showIdentityListIcon {
		transform: rotate(90deg);
	}

	.unShowIdentityListIcon {
		transform: rotate(270deg);
	}

	/* 图片 */
	.imgBox {
		display: flex;
		flex-wrap: wrap;
		/* 		justify-content: space-around; */
	}

	.addImgWrapper {
		width: 200rpx;
	}

	.imgBox::after {
		content: "";
		flex: auto;
	}

	.addImgWrapper image {
		margin: 5rpx 15rpx;
		width: 200rpx;
		height: 200rpx;
	}

	.imgBox .upImg {
		width: 200rpx;
		height: 200rpx;
		margin: 5rpx 15rpx;
		border-radius: 30rpx;
	}

	.upImgBox {
		position: relative;
	}

	.upImgBoxClose {
		position: absolute;
		height: 30px;
		width: 30px;
		top: 0;
		right: 0;
		z-index: 200;
	}

	.text {
		font-size: 12px;
		color: #666;
		margin-top: 5px;
	}

	.contact_input {
		padding-left: 25rpx;
		width: 460rpx;
	}
</style>